<template>
  <div class="login_top_div">&nbsp;
    <div class="container login_all_content">
      <div class="row">
        <div class="col-md-4 col-md-offset-4">
          <div class="login_head">
            <h1 class="text-center loginPage_title">博客屋</h1>
            <hr>
            <h3 class="text-center">免费在线视频学习平台</h3>
            <hr>
            <P class="text-center">
              <router-link class="btn btn-default text-center login_checkFeatures" type="button" :to="{ name: 'LoginPage' }">登录</router-link>
              <router-link class="btn btn-default text-center login_checkFeatures" type="submit" :to="{ name: 'RegisterPage' }">注册</router-link>
            </P>
            <hr>
          </div>
          <transition name="fade">
            <router-view></router-view>
          </transition>
        </div>
      </div>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>

  import PageFooter from '@/view/base/Footer'
  export default {
    name: 'UserAuthorization',
    components: {
      PageFooter
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        registerContentShow: 'none',
        loginContentShow: 'inline'
      }
    },
    created: function () {
      this.$router.push({name: 'LoginPage'})
    },
    methods: {
      showRegister: function () {
        this.registerContentShow = 'inline'
        this.loginContentShow = 'none'
      },
      showLogin: function () {
        this.registerContentShow = 'none'
        this.loginContentShow = 'inline'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login_top_div{
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: rgb(247, 250, 252);
    /*background:url(/static/pic/login/loginBackground.jpg) no-repeat;*/
    /**/
    /*background-size:cover;*/
    border: none;
  }
  .login_all_content{
    margin-top: 2%;
  }
  .login_botton{
    width: 100%;
  }
  input{
    background:rgba(0, 0, 0, 0);
    height: 40px;
  }
  .login_checkFeatures{
    width: 40%;
  }
  .loginPage_title{
    color: rgb(15,136,235);
    font-size: 50px;
  }
  .login_content{
    -webkit-transition:all .5s;
    transition:all .5s;
  }
</style>
